
* {
    margin: 0;
    padding: 0;
    font-size: large;
    font-family: '幼圆';
    user-select: none;
    /* user-select: none; */
}

#app {
    width: 100vw;
    height: 100vh;
}

/* *::-webkit-scrollbar {
    width: 0 !important; 
}

* {
    scrollbar-width: none; 
} */

.border {
    border-radius: 5px;
    box-shadow: 0px 0px 1px black;
}

.card {
    border-radius: 10px;
    box-shadow: 0px 0px 5px #ccc;
}

.card2 {
    border-radius: 5px;
    box-shadow: 0px 0px 2px #ccc;
}

.flex_col {
    display: flex;
    flex-direction: column;
}

.flex_col_start {
    display: flex;
    flex-direction: column;
    align-items: start;
}

.flex_col_center {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.flex_row {
    display: flex;
    flex-direction: row;
    align-items: start;
}

.flex_row_center {
    display: flex;
    flex-direction: row;
    align-items: center;
}

.flex_center_self {
    align-self: center;
}

.flex_start_self {
    align-self: flex-start;
}

.flex_start_self2 {
    justify-self: flex-start;
}

.flex_end_self {
    align-self: flex-end;
}


.flex_center_justify {
    justify-content: center;
}

.m5 {
    margin: 5px;
}

.m10 {
    margin: 10px;
}

.mt5 {
    margin-top: 5px;
}

.ml5 {
    margin-left: 5px;
}

.ml10 {
    margin-left: 10px;
}

.p10 {
    padding: 10px;
}

.p5 {
    padding: 5px;
}

.mt10 {
    margin-top: 10px;
}

@keyframes anim_scale {
    from {
        transform: scale(30%) translate(-50%, -50%);
        transform-origin: top left;
    }
    to {
        transform: scale(100%) translate(-50%, -50%);
        transform-origin: top left;
    }
}

.dialog {
    user-select: none;
    min-width: 200px;
    background-color: white;
    border-radius: 10px;
    box-shadow: 0px 0px 10px #ccc;
    z-index: 2;
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

.show_anim {
    animation: anim_scale;
    animation-duration: 200ms;
}

.close_anim {
    animation: anim_scale;
    animation-direction: reverse;
    animation-duration: 300ms;
}

.dialog_title_row {
    justify-content: space-between;
}

.dialog_space {
    width: 30px;
    height: 30px;
}

.dialog_btn_close {
    background-image: url('./assets/ic_btn_close_n.png');
    background-size: cover;
}

.dialog_btn_close:hover {
    background-image: url('./assets/ic_btn_close_h.png');
}

.dialog_btn_close:active {
    background-image: url('./assets/ic_btn_close_p.png');
}

@keyframes anim_prog {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

.dialog_icon_prog {
    width: 80px;
    height: 80px;
    background-image: url('./assets/ic_prog.png');
    background-size: cover;
    animation: anim_prog 1000ms;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}

.dialog_icon_succ {
    width: 80px;
    height: 80px;
    background-image: url('./assets/ic_succ.png');
    background-size: cover;
}

.dialog_icon_err {
    width: 80px;
    height: 80px;
    background-image: url('./assets/ic_err.png');
    background-size: cover;
}

.dialog_icon_alm {
    width: 80px;
    height: 80px;
    background-image: url('./assets/ic_warn2.png');
    background-size: cover;
}


